<!DOCTYPE html>
<html lang="zh-CN">
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>
            注册
        </title>
        <meta content="光大好车" name="keywords" />
        <meta content="光大好车" name="description" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="iconfont/iconfont.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <!--[if lt IE 9]>
            <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js">
            </script>
            <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js">
            </script>
        <![endif]-->
        <script type="text/javascript" src="script/jquery.js"></script>
        <script type="text/javascript" src="script/bootstrap.min.js"></script>
        <script type="text/javascript" src="script/Validform_v5.3.2_min.js"></script>
        <script src="script/uploadimage.js"></script>
        <script type="text/javascript" src="script/jquery-3.3.1.min.js"></script>
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="css/feedback-page.css" />
        <style>
            #drop_area{
                margin:0 auto;
                width:30px;
                height:30px;
            }
            .image{
                margin-left:10%;
            }
        </style>
        <script src="js/mui.min.js"></script>
		<!--<script src="js/mui.js"></script>-->
		<script src="js/mui.picker.min.js"></script>
		<script src="js/mui.picker.js"></script>
		<script src='js/feedback.js'></script>
		<script src="js/app.js"></script>
        <script>
			var files = [];
			(function($, doc) {
				mui.init({
					swipeBack: true //启用右滑关闭功能
				});

				document.addEventListener("plusready", plusReady, false);

				function plusReady() {
					var wv = plus.webview.currentWebview();
					document.getElementById("addnew").addEventListener("tap", function() {
						var num = $(".pic_look.col-md-1.col-xs-4").length;
						document.getElementById("number").innerHTML = num;
						if(num >= 1) {
							//document.getElementById("input").disabled = "disabled"; 
							$("#chose_pic_btn").css("display", "none");
							$("#addnew").css("display", "none");
						} else {
							showActionSheet(); //拍照还是相册  
						}

					}); 

					plus.nativeUI.closeWaiting();

				}
			}(mui, document));

			// 添加文件  
			var index = 1;
			var newUrlAfterCompress;

			function appendFile(p) {
				files.push({
					path: p,
					name: "photo_" + index
				});
				//index++;
			}
			// 产生一个随机数  
			function getUid() {
				return Math.floor(Math.random() * 100000000 + 10000000).toString();
			}

			function galleryImgs() { // 从相册中选择图片  
				plus.gallery.pick(function(e) {
					console.log("选择了" + e.files.length + "个图片");
					for(var i = 0; i < e.files.length; i++) {
						if(i < 9) {
							var _str = "<span class='pic_look col-md-1 col-xs-4' style='background-image: url(" + e.files[i] + ")'><em id='delete_pic'>-</em></span>";
							$('#chose_pic_btn').before(_str);
							var dstname = "_downloads/" + getUid() + ".jpg"; //设置压缩后图片的路径  
							newUrlAfterCompress = compressImage(e.files[i], dstname);
							alert(newUrlAfterCompress);
							appendFile(dstname);
						}
					}
				}, function(e) {
					console.log("取消选择图片");
				}, {
					filter: "image",
					multiple: true
				});
			}

			//压缩图片，这个比较变态的方法，无法return  
			function compressImage(src, dstname) {
				plus.zip.compressImage({
						src: src,
						dst: dstname,
						overwrite: true,
						quality: 20
					},
					function(event) {
						return event.target;
					},
					function(error) {
						console.log(error);
						return src;
					});

			}

			function showActionSheet() {
				var bts = [{
					title: "拍照"
				}, {
					title: "从相册选择"
				}];
				plus.nativeUI.actionSheet({
						cancel: "取消",
						buttons: bts
					},
					function(e) {
						if(e.index == 1) {
							getImage();
						} else if(e.index == 2) {
							galleryImg();
						}
					}
				);
			}
			function galleryImg() {    
			// 从相册中选择图片  
			console.log("从相册中选择图片:");  
			    plus.gallery.pick( function(path){  
			        console.log(path);
			        alert(path);
			        var _str = "<span class='pic_look col-md-1 col-xs-4' style='background-image: url(" + path + ")'><em id='delete_pic'>-</em></span>";
					$('#chose_pic_btn').before(_str);
					$("#chose_pic_btn").css("display", "none");
					var dstname = "_downloads/" + getUid() + ".jpg"; //设置压缩后图片的路径  
					newUrlAfterCompress = compressImage(path, dstname);
					appendFile(dstname);
			    }, function ( e ) {  
			        console.log( "取消选择图片" );  
			    }, {filter:"image"} );  
			}  
			//拍照   
			function getImage() {
				var cmr = plus.camera.getCamera();
				cmr.captureImage(function(p) {
					plus.io.resolveLocalFileSystemURL(p, function(entry) {
						var localurl = entry.toLocalURL(); //  
						var _str = "<span class='pic_look col-md-1 col-xs-4' style='background-image: url(" + localurl + ")'><em id='delete_pic'>-</em></span>";
						$('#chose_pic_btn').before(_str);
						var dstname = "_downloads/" + getUid() + ".jpg"; //设置压缩后图片的路径  
						newUrlAfterCompress = compressImage(localurl, dstname);
						appendFile(dstname);
					});
				});
			}
		</script>
    </head>
    
    <body>
        <div id="brand-box">
            <header class="mo-header">
                <div class="mo-header-left">
                    <a href="#">
                        首页
                    </a>
                    <i class="iconfont">
                        &#xe61d;
                    </i>
                    <a href="#">
                        注册
                    </a>
                </div>
            </header>
        </div>
        <!--内容-->
        <div class="container mt20">
            <div class="login_main">
                <div class="mt20">
                    <form name="loginform" class="form-horizontal" method="post" action="#">
						<div class="upload_picture">
							<span>上传照片(已选择</span>
							<span id="number">0</span>
							<span>/15)</span>
						</div>
						<div class="release_up_pic">
							<div class="up_pic">
								<div id="chose_pic_btn" class="col-md-1 col-xs-4">
									<img src="images/true.jpg" id="addnew" style="margin-left:100%;margin-bottom:20px;">
								</div>
							</div>
						</div>
                        <div class="form-group">
                            <div class="col-xs-10 col-xs-offset-1">
                                <input type="button" value="上传" class="btn btn-danger btn-block" id="upload">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--内容-->
        <!--<a href="javascript:;" id="returntop">-->
        </a>
        <script type="text/javascript" src="script/jquery.lazyload.js">
        </script>
        <script type="text/javascript" charset="utf-8">
            $(function() {
                $("img.lazy").lazyload({
                    effect: "fadeIn"
                });
                /*$('#returntop').click(function() {
                    $('html,body').animate({
                        scrollTop: '0px'
                    },
                    1000);
                    return false;
                });*/
            });
        </script>

        <script type="text/javascript">
            var dragImgUpload = new DragImgUpload("#drop_area",{
                callback:function (files) {
                    //回调函数，可以传递给后台等等
                    console.log(files);
                    $(".img").attr('src',files); 
                }
            })
        </script>

        <!--<script>
			$(function() {
				$.ajax({
					url: "http://192.168.3.106:8080/sechandcar/app/users/shcUser/selectMyImgsrc",
                    async : false,
                    type: "post",
                    dataType: "json",
                    data: {},
                    success: function (data) {
                    	$(".img").attr("src","data[0].img");
                    	//$(".img").css('display','block'); 
                    },
                    error: function(data){
                    	window.alert("错误");
                    }  
				});
			})           
        </script>-->
        
        <script>
        	var telephone = window.localStorage.getItem("telephone");
            $("#upload").on("click", function(){
              //alert($(".telephone").val());
              $.ajax({
                type:"post",
                url:servicePath+"sechandcar/app/users/shcUser/uoploadImg",
                //async:false,
                data: {"image":$.trim($('.img').attr('src')),
                       "telephone":telephone},
                //datatype:'json',
                success:function(data){		
                 // window.alert(data);
                  if(data == 'success'){
                    //alert(1);
                    alert("上传成功");
                  } 
                },
                error:function(data){
                  //console.log(data);
                  window.alert("上传失败");
                }
              });	
            });
        </script>
    </body>

</html>